<template>
  <div id="home">
    <!--导航-->
    <nav-bar/>
    <!--主体-->
    <div class="content m-lr-40">
      <!--v-slot 作用域插槽-->
      <router-view class="router-view" v-slot="{ Component }">
        <transition :name="transitionName">
          <component :is="Component"/>
        </transition>
      </router-view>
    </div>
  </div>

</template>
<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import navBar from "@/views/test/components/nav-ber.vue";

export default {
  components: {
    navBar
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      transitionName: 'slide-left'
    })
    // 全局前置导航钩子
    router.beforeEach((to, from) => {
      // 设置路由过渡效果
      if (to.meta.index > from.meta.index) state.transitionName = 'slide-left' // 向左滑动
      else if (to.meta.index < from.meta.index) state.transitionName = 'slide-right' // 由次级到主级
      else state.transitionName = ''   // 同级无过渡效果
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>
<style lang="scss" scoped>
#home {
  color: var(--main-color);
  max-width: 1280px;
  margin:0 auto;
  .content{
    color: #000;
    background: #fff;
    height: 88vh;
    overflow: auto;
    position: relative;
    border-radius: 10px;
    .router-view{
      overflow: auto;
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-overflow-scrolling: touch;
    }
  }

  //https://blog.csdn.net/Superman_H/article/details/122851610
  // 进入/返回过度动画
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active{
    //height: 100%;
    will-change: transform;
    transition: all 500ms;
    position: absolute;
    backface-visibility: hidden;
  }
  //============进入
  //新页面
  .slide-left-enter-from{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  //老页面
  .slide-left-leave-to{
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  //============返回
  //新页面
  .slide-right-enter-from{
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  //老页面
  .slide-right-leave-to{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

}

</style>
